<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="../templates/ui.xhtml">
	
	<ui:define name="head">
		<script type="text/javascript">
			function start() {
				this.progressInterval = setInterval(function(){
					pbClient.setValue(pbClient.getValue() + 10);
				}, 1000);
			}
	
			function cancel() {
				clearInterval(this.progressInterval);
				pbClient.setValue(0);
			}
		</script>
	</ui:define>

	<ui:define name="content">

		<h1 class="title ui-widget-header ui-corner-all">ProgressBar</h1>
		<div class="entry">
			<p>ProgressBar is a process status indicator that can either work purely on client side or interact with server side
			via ajax.</p>
		
			<h:form id="form">
                
                <p:growl id="growl" />
		
				<h3>Client Side ProgressBar</h3>
				<p:commandButton value="Start" id="start" type="button" onclick="start();startButton1.disable()" widgetVar="startButton1"/>
				<p:commandButton value="Cancel" id="cancel" type="button" onclick="cancel();startButton1.enable()" />
				<br /><br />
				<p:progressBar id="progressBarClient" widgetVar="pbClient" style="width:300px"/>
				 				 
				<h3>Ajax ProgressBar with Growl Integration</h3>
				<p:commandButton value="Start" type="button" onclick="pbAjax.start();startButton2.disable();" widgetVar="startButton2" />
				<p:commandButton value="Cancel" actionListener="#{progressBean.cancel}" oncomplete="pbAjax.cancel();startButton2.enable();" />
				<br /><br />
				<p:progressBar widgetVar="pbAjax" ajax="true" value="#{progressBean.progress}" oncomplete="startButton2.enable()">
                    <p:ajax event="complete" listener="#{progressBean.onComplete}" update="growl" />
                </p:progressBar>
					
			</h:form>
			
			<h3>Source</h3>
			<p:tabView>
				<p:tab title="progressBar.xhtml">
					<pre name="code" class="xml">
&lt;h:form&gt;
                
    &lt;p:growl id="growl" /&gt;

    &lt;h3&gt;Client Side ProgressBar&lt;/h3&gt;
    &lt;p:commandButton value="Start" type="button" onclick="start();startButton1.disable()" widgetVar="startButton1"/&gt;
    &lt;p:commandButton value="Cancel" type="button" onclick="cancel();startButton1.enable()" /&gt;

    &lt;p:progressBar widgetVar="pbClient" style="width:300px"/&gt;

    &lt;h3&gt;Ajax ProgressBar with Growl Integration&lt;/h3&gt;
    &lt;p:commandButton value="Start" type="button" onclick="pbAjax.start();startButton2.disable();" widgetVar="startButton2"/&gt;
    &lt;p:commandButton value="Cancel" actionListener="\#{progressBean.cancel}" oncomplete="pbAjax.cancel();startButton2.enable();" /&gt;

    &lt;p:progressBar widgetVar="pbAjax" ajax="true" value="\#{progressBean.progress}" oncomplete="startButton2.enable()"&gt;
        &lt;p:ajax event="complete" listener="\#{progressBean.onComplete}" update="growl" /&gt;
    &lt;/p:progressBar&gt;

&lt;/h:form&gt;
                    </pre>
				
				<pre name="code" class="javascript">
&lt;script type="text/javascript"&gt;
	function start() {
		this.progressInterval = setInterval(function(){
			pbClient.setValue(pbClient.getValue() + 10);
		}, 2000);
	}

	function cancel() {
		clearInterval(this.progressInterval);
		pbClient.setValue(0);
	}
&lt;/script&gt;
				</pre>
				</p:tab>
				
				<p:tab title="ProgressBean.java">
					<pre name="code" class="java">
package org.primefaces.examples.view;

import java.io.Serializable;

import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;

public class ProgressBean implements Serializable {

	private Integer progress;

	public Integer getProgress() {
		if(progress == null)
			progress = 0;
		else {
			progress = progress + (int)(Math.random() * 35);
			
			if(progress &gt; 100)
				progress = 100;
		}
		
		return progress;
	}

	public void setProgress(Integer progress) {
		this.progress = progress;
	}
	
	public void onComplete() {
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Progress Completed", "Progress Completed"));
	}
	
	public void cancel() {
		progress = null;
	}
}
					</pre>
				</p:tab>
			</p:tabView>
			
						
		</div>
	
				
	</ui:define>
</ui:composition>